/**
 * DOM 操作封装
 */

//封装DOM加载事件
/*
DOMContentLoaded和load的区别
    load: 表示当网页中所有资源加载完成后,才能执行后面的回调函数
    DOMContentLoaded:表示当网页中DOM节点加载完成后,就可以执行 后面的回调函数  ---快一点


    
window.addEventListener('load',function(){

})

window.addEventListener('DOMContentLoaded',function(){

})

*/
function ready(callback) {
    window.addEventListener('DOMContentLoaded', callback)
}

//封装操作DOM-单个操作
function getEle(selector) {
    return document.querySelector(selector);
}

//封装操作DOM-多个操作
function getEles(selector) {
    return document.querySelectorAll(selector);
}

//封装注册事件功能
function addEvent(obj, callback, type = 'click') {
    getEle(obj).addEventListener(type, callback)
}
// 封装底部导航函数
function bMenu(obj) {
    // 
    document.body.innerHTML += `
    <!-- 导航 -->
        <div class="navbox">
            <ul>
            <li>
                <a href="home.html" class="${obj=='home'?'navcolor':''}" id="publick-a">
                <span class="iconfont icon-shouye fs30px"></span>
                <span class="navtxt">首页</span>
                </a>
            </li>
            <li>
                <a href="motion.html" class="${obj=='motion'?'navcolor':''}" id="publick-a">
                <span class="iconfont icon-yundongjiankang fs30px"></span>
                <span class="navtxt">运动</span>
                </a>
            </li>
            <li>
                <a href="circle.html" class="${obj=='circle'?'navcolor':''}" id="publick-a">
                <span class="iconfont icon-shejiao-wangluo fs30px"></span>
                <span class="navtxt">圈子</span>
                </a>
            </li>
            <li>
                <a href="my.html" class="${obj=='my'?'navcolor':''}" id="publick-a">
                <span class="iconfont icon-wode fs30px"></span>
                <span class="navtxt">我的</span>
                </a>
            </li>
            </ul>
        </div>
    `
}
// 封装头部导航
function hMenu(obj) {
    getEle('main').innerHTML = `
    <ul class="head df jcsa ">
     <li class="${obj=='motion'?'active':''}">
        <a href="motion.html">跑步</a>
        <span></span>
     </li>
     <li class="${obj=='ride'?'active':''}">
        <a href="ride.html">骑行
        <span ></span>
      </li>
      <li class="${obj=='train'?'active':''}">
        <a href="train.html">课程训练</a>
        <span></span>

      </li>
    </ul>
    ` + getEle('main').innerHTML
}

const https = require('../utils/https');

function upLoadPic(url, key, files, callback) {
    let fd = new FormData();
    fd.append(key, files);
    https.post(url, fd, callback)
}

// 生日格式分装
function formData(val) {
    return val < 10 ? val = '0' + val : val
}


// 生日的补零函数
function formaDate(value){
    return value<10?"0"+value:value
}


//导出
module.exports = {
    ready,
    getEle,
    getEles,
    addEvent,
    bMenu,
    upLoadPic,
    hMenu,
    formData
}
